<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>6Vue 计算属性的setter和getter</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">{{fullName}}{{position}}</div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                state: 'China',
                province: 'Guangdong',
                position: 'south'
                // fullName: 'China  Guangdong'  //数据冗余
            },
            // 计算属性
            computed: {
                // fullName: function () {
                //     console.log('计算了一次');
                //     return this.state + " " + this.province
                // },
                // 等价于
                fullName: {
                    get: function () {
                        return this.state + " " + this.province
                    },
                    set: function (value) {
                        console.log(value);
                        var arr = value.split(' ');
                        this.state = arr[0]
                        this.position = arr[1]
                    }
                }
            },
        })
    </script>
</body>

</html>